<%+header%>

<script>  //general function
	function getValue(ID)
	{
		return document.getElementById(ID).value;
	}
	function setDisplay(ID,type)
	{
		if(!type)
		{
			document.getElementById(ID).style.display="none";
		}
		else
		{
			document.getElementById(ID).style.display="inline";
		}
	}
	function setHTML(ID,STR)
	{
		document.getElementById(ID).innerHTML=STR;
	}
	function setValue(ID,val){
		document.getElementById(ID).value=val;
	}
</script>

<script>
	function getCliAccUrl(mac)
	{
			var device_detail=function (cli_url)
			{
				var detailStr='';
				for(var i=0;i<cli_url.length;i++)
				{
					detailStr+='<tr>'
						+'<td width="5%" ><%:URL:%></td><td style="color:red">'+cli_url[i].url+'</td>'
					+'</tr>';
				}

				setHTML("ID_Table_dev_detail",detailStr);
				if("undefined" == typeof(cli_url.length)){
	  	    	cli_url=new Array();
	  	  }
				setHTML("ID_TD_CurrentData",cli_url.length);
			}

     var callPath='<%=luci.dispatcher.build_url("admin", "behavioranalysis","cli_acc_url")%>';
     callPath=callPath+'/'+mac;
	   XHR.get(callPath,null,function(x,rval){
		    device_detail(rval[0]);
		  }
	  );

	  setDisplay("ID_Table_dev",false);
	  setDisplay("ID_Table_dev_detail",true);
		setDisplay("ID_Table_Detail",true);
  }

	function getClientMac()
	{
		var  Device_info=function(devInfo)
	  {
	  	  if("undefined" == typeof(devInfo.length)){
	  	    	devInfo=new Array();
	  	  }
				var devstr='<tr>'
						+'<td width="20%"><%:Current Terminal Device%>:</td>'
						+'<td width="5%" style="color:red">'+devInfo.length+'</td>'
						+'<td><%:sets%></td>'
						+'<td  width="5%"></td>'
					+'</tr>';
				for(var i = 0 ; i < devInfo.length ; i++)
				{
					devstr+='<tr>'
							+'<td id="ID_TD_dev_'+i+'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+'<%:MAC%>:</td>'
							+'<td style="color:red">'+devInfo[i].macaddr+'</td>'
							+'<td></td>'
							+'<td><input class="cbi-button" type="button" value="<%:details%>" onclick="getCliAccUrl(\''+devInfo[i].macaddr+'\');"></input></td>'
						+'</tr>';

				}
				setHTML("ID_Table_dev",devstr);
	  }

    var callPath='<%=luci.dispatcher.build_url("admin", "behavioranalysis", "cli_mac")%>';
    XHR.get(callPath, null,function(x,rval){
    	Device_info(rval[0]);
    	}
    );

	  setDisplay("ID_Table_dev_detail",false);
	  setHTML("ID_Table_dev_detail","");
	  setHTML("ID_TD_CurrentData",0);
		setDisplay("ID_Table_Detail",false);
		setDisplay("ID_Table_dev",true);
  }
/*
	function Search_dev()
	{
		var srcMac=getValue("ID_INPUT_srcMAC");
		for(var i=0;i < devInfo.length;i++){
		  	if(devInfo[i].mac == srcMac){
		  			device_detail(i);
		  			break;
		  	}
		}
		if(i == devInfo.length){
				setHTML("ID_Table_dev_detail","");
				setHTML("ID_TD_CurrentData",0);
		}

	}
*/
</script>

<style>
	.tab{
	  width: 100%;
    padding: 0;
    font-size: 13px;
    border-collapse: collapse;
  }
  .tab td{
  		padding: 10px 10px 9px;
			line-height: 18px;
			text-align: left;
			border-top: 0px solid #ddd;
			vertical-align: middle;
  }
</style>
<h2><a id="content" name="content"><%:Behavior Analysis%></a></h2>
<table id="ID_Table_Detail" class="tab" style="display:none;">
	<tr>
		<td width="12%"><%:Current data%>:</td>
		<td id="ID_TD_CurrentData" width="5%" style="color:red">0</td>
		<td><%:item%></td>
		<!--td width="50%"><%:Please input source MAC:%> <input class="cbi-input-text" id="ID_INPUT_srcMAC" type="text" ><input class="cbi-button" id="ID_INPUT_srcMAC" type="button" value="<%:search%>" onclick="function(){};"></td-->
		<td width="5%"><input id="ID_INPUT_Backbutton" type="button" class="cbi-button" value="<%:Back%>" onclick="getClientMac();"></td>
	</tr>
</table>
<fieldset class="cbi-section">
	<table width="100%" cellspacing="10"  style="display:none" id="ID_Table_dev">
	</table>
	<table width="100%" cellspacing="10"  style="display:none" id="ID_Table_dev_detail">
	</table>
	<script>getClientMac();</script>
</fieldset>
<%+footer%>